<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动的顺序贴靠特性</title>

        <style>
            /* 浮动的顺序贴靠特性
                - 子盒子会按顺序进行贴靠，如果没有足够空间 ，则会寻找再前一个兄弟元素
            */
            .box {
                width: 250px;
                height: 100px;
                border: 1px solid #000;
                margin-bottom: 50px;
            }
            .box .c1 {
                width: 150px;
                height: 100px;
                background-color: orange;
                float: left;
            }
            .box .c2 {
                width: 100px;
                height: 50px;
                background-color: green;
                float: left;
            }
            .box .c3 {
                width: 100px;
                height: 50px;
                background-color: blue;
                float: left;
            }

            /* 浮动的元素一定能设置宽高
               浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽高和高度，既是它是span或者a标签等
            */
            span {
                float: left;
                width: 100px;
                height: 30px;
                background-color: orange;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="c1"></div>
            <div class="c2"></div>
            <div class="c3"></div>
        </div>


        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
     
    </body>
</html>